<!DOCTYPE html>
<html>
<head>
	<title>简书--创作你的创作</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
	<meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
</head>
<body>
	<!--头部导航-->
	<nav id="nav">
		<div class="nav-content">
			<!--左边-->
			<div class="nav-content-left">
				<a href="#"><img src="images/logo.png"></a>
			</div>
			<!--中间-->
			<div class="nav-content-center">
				<ul>
					<li><a href="#"><img src="images/1.png">发现</a></li>
					<li><a href="#"><img src="images/2.png">关注</a></li>
					<li><a href="#"><img src="images/3.png">消息</a></li>
					<li class="search-input">
						<input type="text" value="搜索">
						<img src="images/search.png" class="search-icon">
					</li>
				</ul>
			</div>
			<!--右边-->
			<div class="nav-content-right">
				<img src="images/4.png" class="btn">
				<img src="images/5.png" class="head-btn">
				<a href="#" class="write-btn"><img src="images/6.png">写文章</a>
			</div>
		</div>
	</nav>
	<!--主体内容-->
	<section id="main">

		<!--主体左边-->
		<div class="main-left">
			<!--焦点图-->
			<div class="main-left-top">
				<img src="images/center1.png">
			</div>
			<!--投稿-->
			<div class="main-left-center">
				<a href="#"><img src="images/list.png">故事</a>
				<a href="#"><img src="images/list.png">读书</a>
				<a href="#"><img src="images/list.png">摄影</a>
				<a href="#"><img src="images/list.png">互联网</a>
				<a href="#"><img src="images/list.png">故事</a>
				<a href="#"><img src="images/list.png">读书</a>
				<a href="#"><img src="images/list.png">摄影</a>
				<a href="#"><img src="images/list.png">互联网</a>
				<a href="#">更多热门专题&nbsp;&gt;</a>
			</div>
			<!--文章列表-->
			<div class="main-left-cell">
				<div class="cell">
					<dl>
						<dt><img src="images/center.png"></dt>
						<dd>
							<h3>细读《挪威的森林》</h3>
							<p>花了六天时间读完，基本上是小半天小半天的样子下看完的，算是细读些了。小说我是很少会细读的，基本是凭语感一气而下，遇到生字或不通顺也不停顿，其实个别地方跳过一般也不影响对小说主旨的把握。</p>
							<a href="#"><span>远方不会远</span></a>
							<a href="#"><img src="images/comment.png"><span>999</span></a>
							<a href="#"><img src="images/3.png"><span>8989</span></a>
						</dd>
					</dl>
				</div>

				<div class="cell">
					<dl>
						<dt><img src="images/center.png"></dt>
						<dd>
							<h3>细读《挪威的森林》</h3>
							<p>花了六天时间读完，基本上是小半天小半天的样子下看完的，算是细读些了。小说我是很少会细读的，基本是凭语感一气而下，遇到生字或不通顺也不停顿，其实个别地方跳过一般也不影响对小说主旨的把握。</p>
							<a href="#"><span>远方不会远</span></a>
							<a href="#"><img src="images/comment.png"><span>999</span></a>
							<a href="#"><img src="images/3.png"><span>8989</span></a>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<!--主体右边-->
		<div class="main-right">
			<!--第一部分-->
			<div class="main-right-top">
				<a href="#"><img src="images/11.png"></a>
				<a href="#"><img src="images/22.png"></a>
				<a href="#"><img src="images/33.png"></a>
				<a href="#"><img src="images/44.png"></a>
				<a href="#"><img src="images/22.png"></a>
			</div>
			<!--第二部分-->
			<div class="main-right-center">
				<dl>
					<dt><img src="images/ma.png"></dt>
					<dd>
						<p>下载简书APP</p>
						<p>随时随地发现和创作内容</p>
					</dd>
				</dl>
			</div>
			<!--第三部分-->
			<div class="main-right-bottom">
				<div class="main-right-bottom-head">
					<span>推荐作者</span>
					<span><a href="#">换一批</a></span>
				</div>
				<ul>
					<li>
						<a href="#" class="author"><img src="images/z1.png"></a>
						<div>
							<a href="#" class="title">董克平日记</a>
							<p>写了893.7k字 · 3.2k喜欢</p>
						</div>
						<a href="#" class="focus">+关注</a>
					</li>
					<li>
						<a href="#" class="author"><img src="images/z1.png"></a>
						<div>
							<a href="#" class="title">董克平日记</a>
							<p>写了893.7k字 · 3.2k喜欢</p>
						</div>
						<a href="#" class="focus">+关注</a>
					</li>
					<li>
						<a href="#" class="author"><img src="images/z1.png"></a>
						<div>
							<a href="#" class="title">董克平日记</a>
							<p>写了893.7k字 · 3.2k喜欢</p>
						</div>
						<a href="#" class="focus">+关注</a>
					</li>
					<li>
						<a href="#" class="author"><img src="images/z1.png"></a>
						<div>
							<a href="#" class="title">董克平日记</a>
							<p>写了893.7k字 · 3.2k喜欢</p>
						</div>
						<a href="#" class="focus">+关注</a>
					</li>
					<li>
						<a href="#" class="author"><img src="images/z1.png"></a>
						<div>
							<a href="#" class="title">董克平日记</a>
							<p>写了893.7k字 · 3.2k喜欢</p>
						</div>
						<a href="#" class="focus">+关注</a>
					</li>
					
				</ul>
				<a href="#" class="main-right-footer"> 查看全部</a>
			</div>
		</div>
	</section>

</body>
</html>